<template>
    <div class="content">
        <p>单位：辆</p>
        <div class="tableBox">
            <el-table :data="listInfo" border max-height="693" :style="{ width: '100%' }"
                :header-cell-style="setHeaderCellStyle" :cell-style="setCellStyle">
                <el-table-column :width="item.key == 'num' || item.key == 'qunum' ? '100px' : 'auto'"
                    v-for="item in tableHeaderList" :key="item.key" :prop="item.key" :label="item.value">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NormaleTable',
    props: ['listInfo'],
    data() {
        return {
            tableHeaderList: [
                { key: 'dhm', value: '时间' },
                { key: 'num', value: '今年' },
                { key: 'qunum', value: '去年' },
                { key: 'rate', value: '同比' }
            ]
        }
    },
    methods: {
        // 文字过长的改变宽度
        getWidth(key) {
            if (!key) {
                return false
            }
            if (key == "num" || key == 'qunum') {
                return '84px'
            } else {
                return '70px'
            }
        },
        setHeader(range) {
            this.$set(this.tableHeaderList[1], 'value', range[0] + '');
            this.$set(this.tableHeaderList[2], 'value', range[1] + '');
        },
        setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
            if (column.label === '时间') {
                return {
                    background: '#BEDCFC',
                    'text-align': 'center',
                    color: "#3F3F3F",
                    fontSize: '14px',
                    'font-weight': '400',
                    height: '40px',
                    'line-height': '40px',
                    'padding-top': '0px',
                    'padding-bottom': '0px',
                }
            } else if (column.label === '同比') {
                return {
                    background: '#BEDCFC',
                    'text-align': 'center',
                    color: "#3F3F3F",
                    fontSize: '14px',
                    'font-weight': '400',
                    height: '40px',
                    'line-height': '40px',
                    'padding-top': '0px',
                    'padding-bottom': '0px',
                }
            } else {
                return {
                    background: '#BEDCFC',
                    'text-align': 'center',
                    color: "#3F3F3F",
                    fontSize: '14px',
                    'font-weight': '400',
                    height: '40px',
                    'line-height': '40px',
                    'padding-top': '0px',
                    'padding-bottom': '0px',
                }
            }
        },
        setCellStyle({ row, column, rowIndex, columnIndex }) {
            const attri = {
                'text-align': 'center',
                color: '#3D3D3D',
                'font-size': '14px',
                height: '40px',
                'line-height': '40px',
                'padding-top': '0px',
                'padding-bottom': '0px',
            }
            let colorHex = '#3D3D3D';
            if (columnIndex === 3) {
                if (parseFloat(row.rate) > 0) {
                    colorHex = '#F02600';

                } else if (parseFloat(row.rate) < 0) {
                    colorHex = '#46AE65';
                }
            }
            const textColor = { color: colorHex }
            if (rowIndex === 0) {
                return {
                    ...attri,
                    ...textColor,
                    'font-weight': 'bold',
                    background: '#F0F5FA'
                }
            }
            if (rowIndex % 2 === 0) {
                return {
                    ...attri,
                    ...textColor,
                    'font-weight': '400',
                    background: '#F0F5FA'
                }
            }

            if (rowIndex % 2 !== 0) {
                return {
                    ...attri,
                    ...textColor,
                    'font-weight': '400',
                    background: '#FFF'
                }
            }
        },
        getWidth(key) {
            if (key === 'dhm') {
                return 70
            } else {
                return 97
            }
        }
    }
}
</script>

<style lang='less' scoped>
/deep/ .el-table .cell {
    font-family: PingFangSC-Regular, PingFang SC;
    padding: 0;
}

/deep/ .el-table td,
/deep/ .el-table th {
    padding: 8px 0;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    /*font-weight: 400;*/
    color: #3d3d3d;
}

/deep/ .el-table .cell span {
    font-family: PingFangSC-Regular, PingFang SC;
}

/deep/ .el-table .cell a {
    font-family: PingFangSC-Regular, PingFang SC;
    /*font-size: 14px;*/
}

.content {
    margin-top: 0.1rem;

    p {
        margin: 0.2rem 0 0.2rem 0.3rem;
        width: 2rem;
        height: 0.24rem;
        font-size: 0.24rem;
        font-weight: 400;
        color: #666666;
        line-height: 0.24rem;
    }

    .tableBox {
        margin: 0.2rem 0.2rem 0.3rem;
        border-radius: 8px 8px 0 0;
        overflow-x: auto;
    }
}
</style>